<template>
	<div>
		<div class="bejing">
			<div class="up">

				<div>
					<!-- <p>校园循环利用宝|帮助中心</p> -->
					<img class="img" src="./image/logo.jpg" />
				</div>
				<div>
					<p>让我们能帮助到每一个用户</p>
					<div>
						<input type="text" placeholder="请输入您的问题" />
						<div>
							<img src="./image/ss.png" />
						</div>
					</div>
				</div>
				<div>
					<div>
						<img src="./image/kfu.png" />
						<button>在线客服</button>
					</div>
					<div>
						<img src="./image/wl.png" />
						<button>物流查询</button>
					</div>
					<div>
						<img src="./image/aq.png" />
						<button>在线客服</button>
					</div>
				</div>
			</div>
		</div>
		<div class="in">
			<p class="in-p"><span>自助</span>服务</p>
			<div class="in-div">
				<div class="in-div-div">
					<img src="./image/mm.png" />
					<div>
						<p>修改登录密码</p>
						<p>英文加数字或字符的组合密码。安全性更高。</p>
					</div>
				</div>
				<div class="in-div-div">
					<img src="./image/zfmm.png" />
					<div>
						<p>修改支付密码</p>
						<p>当付款时需要输入密码以保证交易安全。</p>
					</div>
				</div>
				<div class="in-div-div">
					<img src="./image/shoj.png" />
					<div>
						<p>修改绑定手机</p>
						<p>绑定手机接收支付、发布等操作的短信验证码。提高账号的安全性。</p>
					</div>
				</div>
				<div class="in-div-div">
					<img src="./image/diz.png" />
					<div>
						<p>修改收货地址</p>
						<p>交易成功后，接收货物的地址。</p>
					</div>
				</div>
				<div class="in-div-div">
					<img src="./image/smrz.png" />
					<div>
						<p>实名认证</p>
						<p>发布或购买商品时需要完成实名认证使您交易更安全。</p>
					</div>
				</div>
				<div class="in-div-div">
					<img src="./image/sj.png" />
					<div>
						<p>商家服务</p>
						<p>为发布的商家提供更好的服务</p>
					</div>
				</div>
			</div>
		</div>
		<app-foot></app-foot>
	</div>

</template>

<script>
	import AppFoot from '../common/AppFoot.vue';
	export default {
		components: {
			AppFoot
		}
	}
</script>

<style scoped>
	.img {
		margin-top: 20px;
		width: 150px;
	}

	.bejing {
		background-size: cover;
		background-image: url("image/bejin.png");
		background-position: center bottom;
		margin-top: -20px;
	}

	.up {
		margin: 0 auto;
		width: 1000px;
		height: 300px;
		/* background-color: red; */
	}

	.up div:first-child {
		height: 20%;
		color: #fff;
		/* border: 1px solid red; */
	}

	.up div:first-child p {
		line-height: 40px;

	}

	.up div:nth-child(2) {
		height: 40%;
		/* border: 1px solid red; */
		display: flex;
		flex-direction: column;
		justify-content: center;
		/* text-align: center; */
		align-items: center;

	}

	.up div:nth-child(2) p {
		font-size: 20px;
		color: #fff;
	}

	.up div:nth-child(2) div {
		/* margin: auto 0; */
		font-size: 20px;
		height: 30px;
		border-radius: 20px 20px 20px 20px;
		width: 50%;
		flex-direction: row;
		justify-content: center;

	}

	.up div:nth-child(2) div input {

		width: 90%;
		height: 80%;
		border-radius: 20px 0px 0px 20px;
		outline: none;
		border: none;
		text-indent: 10px;
	}

	.up div:nth-child(2) div div {

		width: 10%;
		height: 100%;
		background-color: #1196d9;
		border-radius: 0px 20px 20px 0px;
	}

	.up div:nth-child(2) div img {

		width: 50%;
		height: 90%;
		border-radius: 20px 0px 0px 20px;
	}

	.up div:nth-child(3) {
		width: 100%;
		height: 70%;
		/* border: 1px solid red; */
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.up div:nth-child(3) div {
		width: 200px;
		height: 200px;
		border: 1px solid #d8d8d8;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.up div:nth-child(3) div:first-child img {
		margin-top: 25px;

	}

	.up div:nth-child(3) img {
		/* margin-top: 20px; */
		width: 100px;
		height: 100px;
		background-color: #fff;
	}

	.up div:nth-child(3) button {
		color: #13b1ff;
		margin-top: 20px;
		width: 100px;
		height: 30px;
		border: 1px solid #13b1ff;
		background-color: #fff;
	}

	.in {
		margin-top: 100px;
		width: 100%;
		height: 560px;
		/* height: ; */
		/* border: 1px solid red; */
		background-color: #eeeeee;
	}

	.in-p {
		line-height: 60px;
		text-align: center;
		font-size: 20px;
	}

	.in-p span {
		color: #13b1ff;
	}

	.in-div {
		width: 1000px;
		margin: 0 auto;
		height: 400px;
		display: flex;
		justify-content: center;
		flex-flow: row wrap;
		margin-top: -30px;

	}

	.in-div .in-div-div {
		margin-top: 20px;
		margin-left: 10px;
		width: 300px;
		height: 200px;
		background-color: #fff;
		border: 1px solid #eeeeee;
	}

	.in-div-div {
		display: flex;
		justify-content: center;
		align-items: center;
		/* flex: 1; */
	}

	.in-div-div img {
		width: 100px;
		height: 100px;

	}

	.in-div-div div p:first-child {
		line-height: 10px;
		font-size: 20px;
	}

	.in-div-div div p:nth-child(2) {
		color: #9d9d9d;
	}
</style>